<template>
  <!-- 最外层容器 -->
  <div class="user-notice-type-container">
    <!-- 顶部清除浮动线 -->
    <div class="line-top"></div>
    <!-- 中间整个容器 -->
    <div class="container-in">
      <!-- 右则边栏-导航 -->
      <div class="aside">
      </div>
      <!-- /右则边栏 结束 -->
      <!-- 左边内容容器 开始 -->
      <div class="main">
        <!-- 顶部头像区域 -->
        <div class="avatar-box">
          <div class="avatar-div">
            <nuxt-link :to="'/user/'+userId"><img :src="avatar" alt=""></nuxt-link>
            <nuxt-link :to="'/user/'+userId"><b>{{ username }}</b></nuxt-link>
          </div>
          <div class="m-n-box">
            <!-- 通知图标、总数 -->
            <nuxt-link :to="'/user/notice/'+userId" class="letter-a">
              <h1 class="el-icon-message-solid" style="color: red;"></h1> <span class="red">{{
                noticeAllUnReadCount
              }}</span>
            </nuxt-link>
            <!-- 私信图标、总数 -->
            <nuxt-link :to="'/user/message/'+userId" class="letter-a">
              <h1 class="el-icon-message"></h1> <span class="red">{{ messageAllUnreadCount }}</span>
            </nuxt-link>
          </div>
        </div>
        <!-- 会话列表 -->
        <div class="letter-box">
          <ul>
            <!-- 通知的类型：( 0 留言；1、回复；2 点赞；3 关注；4 奖励 ) -->
            <h1 v-if="type == 0"><span class="iconfont icon-bi fs30"></span> 留言类通知</h1>
            <h1 v-if="type == 1"><span class="iconfont icon-pinglun fs35"></span> 回复类通知</h1>
            <h1 v-if="type == 2"><span class="iconfont icon-icon_dianzan-mian fs32"></span> 点赞类通知
            </h1>
            <h1 v-if="type == 3"><span class="iconfont icon-eyes fs32"></span> 关注类通知</h1>
            <h1 v-if="type == 4"><span class="iconfont icon-payment fs50"></span> 奖励类通知</h1>
            <h1 v-if="type == 5"><span class="el-icon-edit-outline fs50"></span> 审核类通知</h1>
            <h1 v-if="type == 6"><span class="el-icon-wind-power fs50"></span> 举报类通知</h1>
            <!-- 系统通知详情 -->
            <li v-for="item in notices" :key="item.id">
              <el-card class="box-card">
                <div class="box-card-div">
                  <!-- 系统通知分类图标 -->
                  <!-- type 通知的类型：( 0 留言；1、回复；2 点赞；3 关注；4 奖励；5 发布；6 举报。 ) -->
                  <!-- entityType 通知的实体类型（0 文章；1 留言；2 回复；3 用户；4 轮播图审核通过；5 轮播图审核未通过；6 文章推荐； 7 文章审核未通过；8 用户被禁言。 ) -->
                  <!-- 留言类通知 -->
                  <div v-if="item.type == 0 && item.entityType == 0">
                    <div class="box-card-div-1">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <span class="fs14"> &nbsp;收到一条来自 </span>
                        <a :href="'/user/'+item.fromId">
                          <b class="ml6">{{ item.fromUsername }}</b>
                        </a>
                        <span class="iconfont icon-bi fs14"> 的留言 </span>
                        <a :href="'/article/'+item.articleId">
                          <p class="title-p">
                            《{{ item.articleTile }}》</p
                          ></a>
                        <p class="content"> {{ item.content }}</p>
                        <div>
                          <span class="el-icon-time fs14"> {{ getDateFormat(item.createTime) }} </span>
                          <el-divider direction="vertical"></el-divider>
                          <span class="el-icon-delete" @click="handleDelete(item.id)"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 回复类通知 -->
                  <div v-if="item.type == 1 && item.entityType == 2">
                    <div class="reply">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <a :href="'/user/'+item.fromId"><b class="ml6">{{ item.fromUsername }}</b></a>
                        <span class="fs14"> 回复了我</span>
                        <a :href="'/article/'+item.articleId">
                          <p class="title-p">《{{ item.articleTile }}》</p>
                        </a>
                        <p class="content"> {{ item.content }}</p>
                        <div>
                          <span class="el-icon-time fs14"> {{ getDateFormat(item.createTime) }} </span>
                          <el-divider direction="vertical"></el-divider>
                          <span class="el-icon-delete" @click="handleDelete(item.id)"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 点赞文章类通知 -->
                  <div v-if="item.type == 2 && item.entityType == 0">
                    <div class="thumb">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <a :href="'/user/'+item.fromId"><b class="ml6">{{ item.fromUsername }}</b></a>
                        <span class="fs14"> 赞了我的文章 + 1</span>
                        <nuxt-link :to="'/article/'+item.articleId">
                          <p class="thumb-title">
                            《{{ item.articleTile }}》</p>
                        </nuxt-link>
                        <div>
                          <span class="el-icon-time fs14"> {{ getDateFormat(item.createTime) }} </span>
                          <el-divider direction="vertical"></el-divider>
                          <span class="el-icon-delete" @click="handleDelete(item.id)"></span>
                        </div>
                        <!--                        <p class="fs12"><i class="el-icon-time"/> {{ getDateFormat(item.createTime) }}</p>-->
                      </div>
                    </div>
                  </div>
                  <!-- 点赞留言类通知 -->
                  <div v-if="item.type == 2 && item.entityType == 1">
                    <div style="display: flex;">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <a :href="'/user/'+item.fromId"><b class="ml6">{{ item.fromUsername }}</b></a>
                        <span class="fs14"> 赞了我的留言 + 1</span>
                        <p class="content">{{ item.content }}</p>
                        <a :href="'/article/'+item.articleId"><p class="title-p">
                          《{{ item.articleTile }}》</p>
                        </a>
                        <p class="fs12"><i class="el-icon-time"/> {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 点赞回复类通知 -->
                  <div v-if="item.type == 2 && item.entityType == 2">
                    <div style="display: flex;">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <a :href="'/user/'+item.fromId"><b class="ml6"> {{ item.fromUsername }}</b></a>
                        <span class="fs14"> 赞了我的回复 + 1</span>
                        <p class="content">{{ item.content }}</p>
                        <a :href="'/article/'+item.articleId"><p class="title-p">
                          《{{ item.articleTile }}》</p>
                        </a>
                        <p class="fs12"><i class="el-icon-time"/> {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 奖励文章类通知 -->
                  <div v-if="item.type == 4 && item.entityType == 0">
                    <div class="award">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <a :href="'/user/'+item.fromId" class="award-username"><b>{{ item.fromUsername }}</b></a>
                        <span class="fs14"> 奖励了我 </span>
                        <span class="fs14" v-html="item.content"></span>
                        <a :href="'/article/'+item.articleId"><p class="award-title">《{{ item.articleTile }}》</p></a>
                        <p class="time"><i class="el-icon-time"/>
                          {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 奖励用户类通知 -->
                  <div v-if="item.type == 4 && item.entityType == 3">
                    <div class="award">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <a :href="'/user/'+item.fromId" class="fs16">
                          <b class="ml4">{{ item.fromUsername }}</b></a>
                        <span class="fs14"> 奖励了我 </span>
                        <span class="fs14" v-html="item.content"> </span>
                        <p class="time"><i class="el-icon-time"/>
                          {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 关注类通知 -->
                  <div v-if="item.type == 3 && item.entityType == 3">
                    <div class="follow">
                      <a :href="'/user/'+item.fromId"><img :src="item.fromAvatar" alt=""></a>
                      <span class="fs16"><a :href="'/user/'+item.fromId"><b> {{ item.fromUsername }}</b></a>
                         <el-divider direction="vertical"/>
                        <i class="iconfont icon-eyes"/> 关注了我  </span>
                      <el-divider direction="vertical"/>
                      <span class="fs14">&nbsp; <i class="el-icon-time"/> {{ getDateFormat(item.createTime) }}  </span>
                    </div>
                  </div>
                  <!-- 推荐文章类通知 -->
                  <div v-if="item.type == 5 && item.entityType == 6">
                    <div class="recommend">
                      <img src="@/assets/img/logo/slogo.png" alt="">
                      <div>
                        <span>  您发布的作品：</span>
                        <div>
                          <a :href="'/article/'+item.articleId"><b>《{{ item.articleTile }}》</b></a>
                        </div>
                        <span style="display: inline-block;font-size: 15px;margin: 6px 0;"> ✅ 已被管理员推荐上首页。 —— 经历网 </span>
                        <div>
                          <span class="el-icon-time"> {{ getDateFormat(item.createTime) }} </span>
                          <el-divider direction="vertical"></el-divider>
                          <span class="el-icon-delete" @click="handleDelete(item.id)"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 文章审核未通过类通知 -->
                  <!-- 审核不通过的原因：(0 无；1 作品侵权；2 涉嫌违法；3 内容不雅；4 骚扰谩骂；5 虚假宣传；6 低质灌水；7 不符合当前分类 ) -->
                  <!-- 状态：(0 待审核；1 审核通过；2 审核未通过；) -->
                  <div v-if="item.type == 5 && item.entityType == 7">
                    <!-- 审核未通过 -->
                    <div class="no-pass" v-if="item.status == 2">
                      <img src="@/assets/img/logo/slogo.png" alt="" style="border-radius: 4px;">
                      <div>
                        <span> 您发布的作品：</span>
                        <!-- 跳到草稿详情页面 http://localhost:3000/article/draft/1508005454800834562 -->
                        <a :href="'/article/draft/'+item.articleId">
                          <p>《{{ item.articleTile }}》</p></a>
                        <!-- 审核未通过 -->
                        <span>❌  审核未通过。原因： </span>
                        <b v-if="item.fromUsername == 1"> 涉嫌侵权</b>
                        <b v-if="item.fromUsername == 2"> 涉嫌违法</b>
                        <b v-if="item.fromUsername == 3"> 内容不雅</b>
                        <b v-if="item.fromUsername == 4"> 骚扰谩骂</b>
                        <b v-if="item.fromUsername == 5"> 虚假宣传</b>
                        <b v-if="item.fromUsername == 6"> 低质灌水</b>
                        <b v-if="item.fromUsername == 7"> 不符合当前分类</b>
                        <span>请点击标题进入修改。 —— 经历网</span>
                        <p class="no-pass-time"><i class="el-icon-time"/>
                          {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 禁言类通知  -->
                  <div v-if="item.type == 5 && item.entityType == 8">
                    <div class="no-publish">
                      <img src="@/assets/img/logo/slogo.png" alt="">
                      <div>
                        <span class="el-icon-info"> 很抱歉的通知您，您已被禁言。 —— 经历网</span>
                        <p><i class="el-icon-time"/>
                          {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 投图赞助-审核通过 -->
                  <div v-if="item.type == 5 && item.entityType == 4 && item.status == 1">
                    <div class="loop">
                      <!-- fromAvatar => looperUrl 存放轮播图 网址 -->
                      <a href="/"><img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <!-- articleTile => title 存放 轮播图标题 -->
                        <span class="fs14">您投放的轮播图片 <b>《{{ item.articleTile }}》</b> ✔  已审核通过，正在</span>
                        <!-- 位置：(0 首页顶部；1 页面右则；2 帖子正文下) content => position 存放轮播图的位置 -->
                        <b v-if="item.content == 0"> 首页顶部 </b>
                        <b v-if="item.content == 1"> 页面右则 </b>
                        <b v-if="item.content == 2"> 帖子正文下 </b>
                        <span class="fs14"> 播放，请点击图片前往 对应位置 查看！ —— 经历网</span>
                        <p class="loop-time"><i class="el-icon-time"/>
                          {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 投图赞助-审核未通过 -->
                  <div v-if="item.type == 5 && item.entityType == 5 && item.status == 2">
                    <div class="loop">
                      <!-- fromAvatar => looperUrl 存放轮播图 网址 -->
                      <a :href="'/looper?id='+item.entityId">
                        <img :src="item.fromAvatar" alt=""></a>
                      <div>
                        <!-- articleTile => title 存放 轮播图标题 -->
                        <span class="fs14"> 您投放的轮播图片 <b>《{{ item.articleTile }}》</b> ❌ 审核未通过，原因：内容  </span>
                        <!-- 审核未通过的原因：(0 无；1 涉嫌侵权；2 涉嫌违法；3 内容不雅；4 血腥暴力；5 涉嫌虚假宣传；) -->
                        <!-- item.fromUsername => fail 存放 审核未通过的原因  -->
                        <b v-if="item.fromUsername == 1"> 涉嫌侵权 </b>
                        <b v-if="item.fromUsername == 2"> 涉嫌违法 </b>
                        <b v-if="item.fromUsername == 3"> 不雅 </b>
                        <b v-if="item.fromUsername == 4"> 血腥暴力 </b>
                        <b v-if="item.fromUsername == 5"> 涉嫌虚假宣传 </b>
                        <span class="fs14">请点击图片，进入修改页面，更换图片后再提交审核！  —— 经历网</span>
                        <p class="loop-time"><i class="el-icon-time"/>
                          {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 举报文章、留言、回复类通知 -->
                  <div v-if="item.type == 6">
                    <div class="report">
                      <img src="@/assets/img/logo/slogo.png" alt="">
                      <div>
                        <p v-if="item.entityType == 0" class="fs16"><b>您举报的文章</b>《{{ item.articleTile }}》</p>
                        <p v-if="item.entityType == 1" class="fs16"><b>您举报的留言内容</b>：{{ item.articleTile }}</p>
                        <p v-if="item.entityType == 2" class="fs16"><b>您举报的回复内容</b>：{{ item.articleTile }}</p>
                        <p v-if="item.entityType == 3" class="fs14"><b>您举报的私信内容</b>：{{ item.letter }}</p>
                        <p v-if="item.entityType == 3" class="fs14 mb10"><b>发送私信的用户</b>：{{ item.articleTile }}</p>
                        <span class="cause"><b>您举报的原因</b>： </span>
                        <!--  举报原因：(0 作品侵权；1 涉嫌违法；2 内容不雅；3 骚扰谩骂；4 虚假宣传；5 低质灌水；6 其它 ) -->
                        <span v-if="item.fromUsername == 0"> 作品侵权 </span>
                        <span v-if="item.fromUsername == 1"> 涉嫌违法 </span>
                        <span v-if="item.fromUsername == 2"> 内容不雅 </span>
                        <span v-if="item.fromUsername == 3"> 骚扰谩骂 </span>
                        <span v-if="item.fromUsername == 4"> 虚假宣传 </span>
                        <span v-if="item.fromUsername == 5"> 低质灌水 </span>
                        <span v-if="item.fromUsername == 6"> 其它 </span>
                        <p class="fs14" v-if="item.fromAvatar"><b>您的举报补充说明</b>： {{ item.fromAvatar }}</p>
                        <p class="content"><b>我们的处理结果</b>：{{ item.content }} —— 经历网 </p>
                        <p class="re-time"><i class="el-icon-time"/>
                          {{ getDateFormat(item.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </li>
            <!-- 分页组件 -->
            <template>
              <!-- md 分页组件 开始 -->
              <el-pagination
                class="sm-hidden"
                background
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-size="size"
                layout="total, prev, pager, next, jumper"
                :total="Number(total)">
              </el-pagination>
              <!-- sm 分页组件 开始 -->
              <el-pagination
                class="md-hidden"
                small
                background
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-size="size"
                layout="total,prev, pager, next"
                :total="Number(total)">
              </el-pagination>
            </template>
          </ul>
        </div>
      </div>
      <!-- /左边内容容器   -->
    </div>
    <!-- 底部清除浮动线 -->
    <div class="line-bottom"></div>
  </div>
</template>
<script>
import {dateFormat} from '@/utils/date' // 日期格式化
export default {
  name: "user-notice-type",
  // 引用中间件，拦截路由请求，判断是否已经身份认证
  middleware: 'auth',
  // 动态标题
  head() {
    return {
      title: '系统通知详情 - 经历网'
    }
  },
  async asyncData({app, store, route}) {
    // 认证登录用户信息
    const userId = store.state.userInfo && store.state.userInfo.id
    const avatar = store.state.userInfo && store.state.userInfo.avatar || ''
    const username = store.state.userInfo && store.state.userInfo.username || ''
    // 分类系统通知列表
    const current = 1
    const size = 10
    // 获取路由中分类通知的 type
    const type = route.query.type
    const {data} = await app.$getUserNoticeDetails(current, size, type)
    const notices = data.noticeDetails
    const total = data.total || 0
    const noticeAllUnReadCount = data.noticeAllUnReadCount
    const messageAllUnreadCount = data.messageAllUnreadCount

    return {
      userId,
      avatar,
      username,
      current,
      size,
      type,
      notices,
      total,
      messageAllUnreadCount,
      noticeAllUnReadCount
    }
  },
  methods: {
    // 格式化日期时间
    getDateFormat(date) {
      return dateFormat(date)
    },
    // 刷新列表
    async fetchData() {
      const {data} = await this.$getUserNoticeDetails(this.current, this.size, this.type)
      this.notices = data.noticeDetails
      this.total = data.total
      this.noticeAllUnReadCount = data.noticeAllUnReadCount
      this.allMessageUnreadCount = data.allMessageUnreadCount
    },
    // 切换分页
    handleCurrentChange(current) {
      this.current = current
      this.fetchData()
    },
    // 根据ID删除通知记录
    handleDelete(id) {
      this.$confirm('确定要 删除 这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        this.$removeNoticeById(id).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message.success(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>

.user-notice-type-container {
  min-height: 630px;
  background-color: #242424;

  // 页面左则容器、右则容器
  .main, .aside {
    border-radius: 4px;
  }

  .main {
    background: linear-gradient(to left, #e5e4e4, #e5e4e4, black);

    // 顶部大头像区
    .avatar-box {
      background-color: black;
      box-shadow: 0 0 20px 6px white;

      .red {
        color: red;
      }

      .avatar-div {
        display: flex;
        justify-content: center;
        padding-top: 20px;
        align-items: center;

        b {
          margin-left: 20px;
          color: #d9d7d7;
        }
      }

      // 通知私信图标
      .m-n-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .red {
          color: red;
        }

        a {
          color: white;
        }
      }

      // 顶部头像
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 0 0 20px 6px white;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        object-fit: cover;
      }

      img:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      }
    }

    // 列表
    .letter-box {
      margin-bottom: 20px;

      .el-icon-delete {
        font-size: 14px !important;
        cursor: pointer;
      }

      .fs50 {
        font-size: 50px;
      }

      .fs35 {
        font-size: 35px;
      }

      .fs32 {
        font-size: 32px;
      }

      .fs30 {
        font-size: 30px;
      }

      .fs12 {
        font-size: 12px;
      }

      h1 {
        text-align: center;
      }

      li {
        // 列表容器
        .box-card {
          clear: both;
          margin: 0 auto 20px;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

          .box-card-div, .box-card-div-1, .reply, .thumb, .award, .loop, .no-publish, .no-pass, .recommend {
            display: flex;

            .award-username {
              margin-left: 4px;
              font-size: 16px;
              color: black;
            }

            .award-title {
              margin: 5px 0;
              font-size: 16px;
              font-weight: bold;
            }

            .ml4 {
              margin-left: 4px;
            }

            .time {
              padding-left: 5px;
              padding-top: 5px;
              font-size: 14px;
              color: #8d9195;
            }

            .thumb-title {
              margin: 5px 0;
              font-weight: bold;
            }

            .title-p {
              margin: 5px 0;
              color: #5f6268;
            }

            .title-p:hover {
              color: #8205c6;
            }

            .fs14 {
              font-size: 14px;
            }

            .fs16 {
              font-size: 16px;
            }

            .ml6 {
              margin-left: 6px;
            }

            // 目标头像
            img {
              width: 50px;
              height: 50px;
              padding: 1px;
              border-radius: 50%;
              transition: all .4s ease-in-out;
              -webkit-transition: all .4s ease-in-out;
              object-fit: cover;
            }

            img:hover {
              transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
            }

            > div {
              margin-right: 10px;

              // 分类通知图标
              span {
                font-size: 50px;
              }

              // 未读数量
              .el-badge {
                width: 55px;
                margin-right: 10px;
              }
            }

            a {
              font-size: 14px;
            }

            a:hover {
              color: #8205c6;
              text-decoration: underline;
            }

            .content {
              margin: 5px 0 5px 5px;
              font-size: 16px;
            }

            .fs12 {
              margin-top: 10px;
              font-size: 12px;
              color: #828487;
            }

            .report {
              span {
                font-size: 15px;
              }
            }
          }

          .follow {
            display: flex;
            align-items: center;
          }

          .loop {
            img {
              width: 50px;
              border-radius: 4px;
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
            }

            b {
              font-size: 14px;
            }

            .loop-time {
              padding: 10px 0 0 6px;
              font-size: 12px;
              color: #8c939d;
            }
          }

          .no-publish, .recommend {
            img {
              border-radius: 4px;
            }

            div {
              span {
                margin-left: 6px;
                font-size: 14px;
              }

              p {
                padding: 10px 0 0 6px;
                font-size: 12px;
                color: #8c939d;
              }

              a {
                margin: 5px 0;
                font-size: 16px;
                font-weight: bold;
              }
            }
          }

          .report {
            div {
              .cause {
                font-size: 14px;
              }

              .content {
                margin: 15px 0 5px 0;
                font-size: 14px;
              }

              .re-time {
                padding-top: 5px;
                font-size: 12px;
                //color: #65696f;
              }
            }
          }

          .no-pass {
            div {
              b {
                font-size: 14px;
              }

              span {
                margin-left: 7px;
                font-size: 14px;
              }

              a {
                margin: 5px 0;
                font-size: 16px;
                font-weight: bold;
              }

              .no-pass-time {
                padding: 10px 0 0 6px;
                font-size: 12px;
                color: #8c939d;
              }
            }
          }

          .recommend {
            img {
              border-radius: 4px;
            }

            div {
              span {
                margin-left: 6px;
                font-size: 14px;
              }

              p {
                padding: 10px 0 0 6px;
                font-size: 12px;
                color: #8c939d;
              }

              a {
                margin: 5px 0;
                font-weight: bold;
                font-size: 16px;
              }

              p {
                padding: 10px 0 0 6px;
                font-size: 12px;
                color: #8c939d;
              }
            }
          }
        }
      }
    }
  }
}

// md
@media screen and (min-width: 960px) {
  .user-notice-type-container {
    background-size: 100% 100%;

    .container-in {
      width: 80%;
      padding-bottom: 26px;
      margin: 0 auto;


      .main {
        float: left;
        width: 75%;
        margin-left: 26px;
        border-radius: 4px;

        // 顶部大头像区
        .avatar-box {

          .el-icon-message-solid {
            padding-left: 150px;
            color: white;
          }

          .letter-a {
            padding-right: 150px;
            color: white;
          }
        }

        .box-card {
          width: 70%;

          .box-card-div {
            display: flex;

            // 目标头像
            img {
              margin-right: 20px;
            }
          }
        }

        // 举报
        .report {
          display: flex;
          padding: 10px;
        }
      }
    }

    .aside {
      width: 23%;
      float: left;
      height: 700px;
      border-radius: 4px;
      background: linear-gradient(to right, #e5e4e4, black);
    }
  }

}


// sm
@media screen and (max-width: 960px) {

  .user-notice-type-container {

    .container-in {
      clear: both;
      width: 100%;

      .main {
        width: 100%;
        margin: 0 auto;

        // 顶部大头像区
        .avatar-box {

          .el-icon-message-solid {
            padding-left: 30px;
            color: white;
          }

          .letter-a {
            padding-right: 30px;
            color: white;
          }
        }

        .box-card {

          .box-card-div {

            // 目标头像
            img {
              margin-right: 10px;
            }
          }
        }

        // 举报
        .report {
          display: flex;
          padding: 10px 0;

          img {
            border-radius: 50%;
          }
        }
      }

      .aside {
        width: 100%;
      }
    }
  }

}
</style>
